const message = '我是一普通变量'
function getName() {
  return '鲁班大师'
}

function fn() {
  return { name: '鲁班'}
}
const fn2 = () => {
  return { name: '鲁班'}
}
// 箭头函数，如果返回值只有一段代码，并且是return语句，那么就可以省略return和大括号
const fn3 = () => ({ name: '鲁班'})
fn()
fn2()
fn3()

const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'},
  {id:1003, name: 'Angular'}
]

const fn5 = () => {
  // return list.map(() => 1) // [1,1,1]
  return list.map(item => (<li>{item.name}</li>))
}
console.log(fn5()); 

const newList = list.map(item => (<li key={item.id}>{item.name}</li>))
console.log(newList);

function App() {
  return (
    <>
      <h3>普通的html元素</h3>
      {/* 1. 引号传递字符串 */}
      {'我是表达式里面一个普通的字符串'}
      <br />
      {/* 2.表达式里面写普通变量 */}
      {message}
      <br />
      {/* 3.表达式里面写函数 */}
      {getName()}
      <br />
      <ul>
        {/* <li v-for="item in list">xxxx</li>
        <li>xxxx</li>
        <li>xxxx</li> */}
        {list.map(item => (<li key={item.id}>{item.name}</li>))}
      </ul>
      <ul>{newList}</ul>
    </>
  )
}

export default App
